<template>
  <article class="ad-input">
    <input :type="type" minlength="4" class="input-field" required v-model="modelValue" @input="emit" />
    <label :class="{ 'label-active': modelValue !== '' }">{{ label }}</label>
  </article>
</template>
<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    /** input输入框的值 */
    modelValue: string
    /** label文本 */
    label: string
    /** input的类型 */
    type?: string
  }>(),
  {
    type: "text"
  }
)
const emits = defineEmits<{
  (e: "update:modelValue", s: string): void
}>()
const emit = () => {
  emits("update:modelValue", props.modelValue)
}
</script>
<style lang="scss" scoped>
.ad-input {
  position: relative;
  height: 37px;
  margin-bottom: 2rem;
  .input-field {
    position: absolute;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    outline: none;
    border-bottom: 1px solid #bbb;
    padding: 0;
    font-size: 0.95rem;
    color: #151111;
    transition: 0.4s;
  }
  label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    color: #bbb;
    pointer-events: none;
    transition: 0.4s;
  }
  .label-active {
    border-bottom-color: #151111;
    font-size: 0.75rem;
    top: -2px;
  }
}
</style>
